﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul li {
				list-style: none;
			}
			#main {
				width: 100%;
				height: 260px;
				margin: 40px 20px;
			}
			.top {
				width: 100%;
			}
			#main ul li {
				width: 200px;
				height: 260px;
				float: left;
				position: relative;
			}
			#main ul li div {
				width: 100%;
				height: 260px;
			}
			#main ul li div.des {
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0,0,0,.3);
				
				}
				#main ul li div.des h4 {
					color: #FFF;
					font-size: 30px;
					padding: 30px;
					width: 30px;
					margin: 0 auto;
					
				}
		</style>
		
        <script src="../../../jquery/jquery-2.1.1.min.js"></script>
		<script>
			$(function(){
				/*
					水平手风琴效果
						1)鼠标移入
							1>宽度改为400
							2>隐藏文字
						2)鼠标移出
							1>显示文字
							2>宽度改为200
				 */
				$('#main').on('mouseenter','li',function(){
					$(this).stop().animate({width:400}).siblings().stop().animate({width:150});
					$(this).find('.des').hide();
				}).on('mouseleave','li',function(){
					$(this).find('.des').show();
					$(this).stop().animate({width:200}).siblings().stop().animate({width:200});
				})
			});
		</script>
	</head>

	<body>
		<div id="main">
			<ul>
				<li>
					<div class="des"><h4>园林酒店</h4></div>
					<div style="background: url(img/1.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>设计师酒店</h4></div>
					<div style="background: url(img/2.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>青年旅社</h4></div>
					<div style="background: url(img/3.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>特色客栈</h4></div>
					<div style="background: url(img/4.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>海岛酒店</h4></div>
					<div style="background: url(img/5.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>海外温泉</h4></div>
					<div style="background: url(img/6.jpg) center;"></div>
				</li>
			</ul>
		</div>
	</body>

</html>